<template>
    <div>
        <div class="searchInput">
            <div class="xia">
                <div class="kuang">
                    <div>
                        账号： <el-input placeholder="请输入账号"></el-input>&emsp;&emsp13;
                    </div>
                    <div>
                        员工姓名： <el-input placeholder="请输入员工姓名"></el-input>&emsp;&emsp13;
                    </div>
                    <div>
                    角色： <el-select style="width: 108px;" v-model="searchRole" placeholder="请选择">
                                    <el-option
                                    v-for="item in roleOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                    </div>&emsp;&emsp13;
                    <div>
                    状态： <el-select style="width: 108px;" v-model="searchState" placeholder="请选择">
                                <el-option
                                    v-for="item in stateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                    </div>
            </div>
            <div class="btns">
            <el-button class="chaxun">查询</el-button>
            <el-button class="reset">重置</el-button>
        </div>
        </div>
        <div class="addBtn">
            <el-button class="newAdd" @click="addBanner(0)"><i class="el-icon-plus"></i>新增</el-button>
        </div>
    </div>
        <!-- 数据 -->
        <el-table
            :header-cell-style="{background:'#e8efff',color:'#000000'}"
            :data="lockTableData"
            :loading="loading"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column prop="order" label="序号" width="60">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.order }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="account" label="账号">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.account }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="staff_name" label="员工姓名">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.staff_name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="department" label="所属部门">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.department }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="role" label="角色">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.role }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template v-slot="scope">
                    <div>
                        <el-switch
                            :active-value="1"
                            :inactive-value="0"
                            v-model="scope.row.state"
                            @change="changeState"
                            active-color="#165BFF"
                            inactive-color="#D9D9D9">
                        </el-switch>
                    </div>
                </template>
               
            </el-table-column>
            <el-table-column prop="last_time" label="最近登陆时间">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.last_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.create_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template v-slot="scope">
                    <div class="scope" style="color:#949BBE;">
                        <span class="editBtn" @click="addBanner(1,scope.row.id)">编辑</span>
                        <span class="detailBtn" @click="goDetail(scope.row.id,scope.row.order_type)">详情</span>
                        <span class="deleteBtn" @click="deleteData(scope.row.id)">删除</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Pagination />
        <!-- 添加/编辑 -->
        <el-dialog center :close-on-click-modal="false" width="636px" top="15vh" :visible.sync="addVisible">
            <template slot="title">
                <div class="dialog_title">
                    {{ alert_title }}
                </div>
            </template>
            <el-form label-position="right" :rules="rules" ref="ruleFormLock" label-width="120px" :model="accountForm">
                <el-form-item prop="number" label="登录账号:" >
                    <el-input :disabled="disabled" v-model="accountForm.number" autocomplete="off" placeholder="请输入登录账号"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="登录密码:" >
                    <el-input :disabled="disabled" v-model="accountForm.password" autocomplete="off" placeholder="请输入登录密码"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="员工姓名:" >
                    <el-input :disabled="disabled" v-model="accountForm.name" autocomplete="off" placeholder="请输入员工姓名"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机号码:" >
                    <el-input :disabled="disabled" v-model="accountForm.phone" autocomplete="off" placeholder="请输入员工手机号"></el-input>
                </el-form-item>
                <el-form-item prop="buMen" label="所属部门:" >
                    <el-select style="width: 423px;" v-model="accountForm.buMen" placeholder="请选择">
                        <el-option
                            :disabled="disabled"
                             v-for="item in buMenOptions"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="role" label="当前角色:" >
                    <el-select style="width: 423px;" v-model="accountForm.role" placeholder="请选择">
                        <el-option
                             :disabled="disabled"
                             v-for="item in roleOptions"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="state" label="状态:">
                    <template >
                        <el-radio :disabled="disabled" v-model="accountForm.state" :label="1">启用</el-radio>
                        <el-radio :disabled="disabled" v-model="accountForm.state" :label="2">禁用</el-radio>
                    </template>
                </el-form-item>
            </el-form>
            <div v-if="is_detail == false" slot="footer" class="dialog-footer">
                <el-button class="formCancel" @click="addVisible = false">取消</el-button>
                <el-button class="formConfirm" type="primary"  @click="agreeWithdraw('ruleFormLock')">{{ confirmBtnText }}</el-button>
            </div>
        </el-dialog>
        
        <SuccessTip :isAgreeShow="isAgreeShow" :text="Success_text"/>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
import SuccessTip from '@/components/SuccessTip.vue'

    export default {
        components:{
            Pagination,SuccessTip
        },
        data() {
            return {
                disabled:false,
                itemIndex:1, //tab
                loading:true,
                isAgreeShow:false,
                alert_title:'提现申请',
                Success_text:'操作成功',
                searchDate:'',
                searchState:'',
                searchRole:'',
                searchStation:'',
                roleOptions: [
                    {
                        value: null,
                        label: '请选择'
                    }, 
                    {
                        value: 0,
                        label: '管理员'
                    }, 
                    {
                        value: 1,
                        label: '超级管理员'
                    }
                ],
                stateOptions: [
                    {
                        value: null,
                        label: '请选择'
                    }, 
                    {
                        value: 0,
                        label: '启用'
                    }, 
                    {
                        value: 1,
                        label: '禁用'
                    }
                ],
                buMenOptions: [
                    {
                        value: null,
                        label: '请选择'
                    }, 
                    {
                        value: 0,
                        label: '产研部'
                    }, 
                    {
                        value: 1,
                        label: '选址部'
                    }
                ],
                lockTableData: [
                    {
                        order: '1',
                        account: 'admin',
                        staff_name:'姜姜',
                        department:'产研部',
                        role:'管理员',
                        state:0,
                        last_time:'2023.03.03 12:00:00',
                        create_time:'2023.03.03 12:00:00',
                        id:1
                    }
                   ],
                rules:{
                 number: [
                     { required: true, message: '请输入账户账号', trigger: 'blur' }
                 ],
                 password: [
                     { required: true, message: '请输入账户密码', trigger: 'blur' }
                 ],
                 phone: [
                     { required: true, message: '请输入手机号', trigger: 'blur' }
                 ],
                 buMen: [
                     { required: true, message: '请选择部门', trigger: 'change' }
                 ],
                 role: [
                     { required: true, message: '请选择角色', trigger: 'change' }
                 ],
                 state: [
                     { required: true, message: '请选择状态', trigger: 'change' }
                 ],
                 name: [
                     { required: true, message: '请输入员工姓名', trigger: 'blur' }
                 ]
                },
                confirmBtnText:"确认",
                newDetailVisible:false, 
                addVisible:false,// 新增
                accountForm:{}, //新增信息
                detailVisible:false, // 详情
                detailInfo:{}, //详情信息
                is_detail:false,
                // 图片上传
                uploadVisible:false,
                dialogImageUrl:'',
            }
        },
        methods: {
            // 图片上传
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 修改状态
            changeState(){

            },
            // 新增部门
            addBanner(state,id){
                console.log('状态',state,id)
                this.is_detail = false 
                this.disabled = false
                if(state == 0){
                    this.addVisible = true
                    this.alert_title = "新增部门"
                    this.confirmBtnText = "确定"
                } else{
                    this.addVisible = true
                    this.alert_title = "编辑部门"
                    this.confirmBtnText = "保存"
                }
            },
            goDetail(id,type){// banner详情
                this.is_detail = true
                this.addVisible = true
                this.alert_title = '详情'
                this.disabled = true
                this.$refs['ruleFormLock'].clearValidate(); // 清除
            },
            agreeWithdraw(){
                        this.addVisible = false
                        this.isAgreeShow = true
                        if(this.confirmBtnText == "确定"){
                            this.Success_text = '添加成功'
                        } else{
                            this.Success_text = '修改成功'
                        }
                        setInterval(() => {
                            this.isAgreeShow = false
                        }, 1500);
            },
            // 处理
            handle(){
                this.handleVisible = true
                this.alert_title = '处理'
            },
            // 确认
            closeRefund(){
                this.closeVisible = true
                this.alert_title = '关闭提现'
            },
          
            // 图片上传

            // 删除
            deleteData(){
                this.$confirm('您确定删除当前项吗', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    title:'操作提示',
                    center: true
                    }).then(() => {
                        this.isAgreeShow = true
                        this.Success_text = '删除成功'
                        let t = setInterval(() => {
                            this.isAgreeShow = false
                        }, 2000);
                    }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    
                });
            },
        },
    }
</script>

<style lang="less" scoped>
.searchInput{
    text-align: left;
    font-size: 14px;
    height: 25.98px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666 !important;
}
.el-input{
    width: 280px;
    height: 35.98px;
    font-size: 11.97px;
    color: #666666;
    background: #F0F1F6;
}
.el-input__inner{
  background-color: #F0F1F6;  
//   background-color: pink !important;
}
.el-select{
    width: 280px;
    height: 35.98px;
}
.kuang{
    float: left;
}

.el-button{
    background: transparent;
    border: none;
}
.chaxun{
    background: #165BFF;
    color: white;
}
.reset{
    background: #F0F1F6;
    color: #666666;
}
::v-deep .el-table th > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
.editBtn{
    display: inline-block;
    margin-right: 8px;
    color: #000000;
    cursor: pointer;
}
.detailBtn{
    margin-right: 8px;
    display: inline-block;
    color: #165BFF;
    cursor: pointer;
}
.deleteBtn{
    display: inline-block;
    color: #FA698D;
    cursor: pointer;
}
.confirmButtonClass{
    background: #165bff;
}
#dialog .el-dialog__header {
    padding: 20px 20px 0px;
    background: #165BFF;
    text-align: left;
    font-weight: bold;
}
#dialog .el-dialog__body{
    height: 188px;
}
.formCancel,.formConfirm{
    width: 140px;
    height: 44px;
    border-radius: 4px 4px 4px 4px;
    border: none;
    opacity: 1;
}
.formCancel{
    background: white;
    border: 1px solid #F0F1F6;
}
.formConfirm{
    margin-left: 24px;
    background: #165BFF;
}
.dialog-footer{
    margin-top: -50px;
    text-align: center;
}
.el-dialog .el-input{
    width: 423px;
}
.el-dialog .el-select{
    width: 423px;
}
.dialog_title{
    margin-top: 24px;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
}
.kuang>div{
    margin: 5px auto;
    display: inline-block;
}
.a .el-select{
    width: 108px;
}
.el-table{
    margin-top: 100px;
}
.xia{
    height: 36px;
}
.btns{
    float: right;
}
.btm{
    margin-top: 14px;
    margin-bottom: 32px;
}
.beiZhu{
    transform: translate(-50px,0);
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999; 
}
.close{
    color: #7D6CFF;
}
.shenhe{
    color: #00E781;
}
.tabDiv{
    display: flex;
    border-radius: 4px;
    margin-bottom: 24px;
}
.tabDiv>div{
    text-align: center;
    line-height: 36px;
    box-sizing: border-box;
    width: 76.5px;
    height: 36px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    border: 1px solid #F0F1F6;
    cursor: pointer;
}


.el-date-picker{
    background: transparent;
}
.blackbtn{
    color: #333333 !important;
}
.el-range-input{
    background: #f0f1f6;
    font-size: 12px !important;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}

.editBtn{
    color: #09D796 !important;
}
.aboutImg img{
    width: 75px;
    height: 75px;
    margin-right: 5px;
}
.addBtn{
    text-align: left;
    margin-top: 31.99px;
}
.newAdd{
    background: #165BFF;
    color: white;
    width: 92px;
    height: 36px;
}
.bannerUrl{
    width: 72px;
    height: 36px;
    vertical-align: middle;
}
</style>
<style>
.el-message-box__header{
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 16px;
}
.el-message-box{
    width: 360px !important;
    height: 188px !important;
    background:#FFFFFF;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
}
.el-message-box--center .el-message-box__content{
    margin-top: 10px;
}
.el-message-box__message{
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.el-message-box__btns{
    margin-top:38px ;
}
.el-button--default{
    width: 80px;
    height: 36px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
}
.el-button--primary{
    width: 80px;
    height: 36px;
    background:#165BFF !important;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #165BFF;
    opacity: 1;
}

.el-range-input{
    background: #f0f1f6;
    font-size: 12px !important;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}

.deleteBtn{
    color: #FA698D !important;
}
.el-upload--picture-card{
    width: 75px;
    height: 75px;
    line-height: 82px;
    text-align: center;
}

</style>